<template>
  <div class="gray-page record-page log-page">
    <nav-bar title="网格员信息" theme="white"></nav-bar>
    <div class="page-main">
      <van-sticky class="page-scroll" :offset-top="44">
        <van-form input-align="right" :label-width="120" @submit="onSubmit">
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.gridPersonName"
            label="姓名"
          />
          <van-field readonly label-class="van-cell__title_gray" required v-model="formParams.sexName" label="性别" />
          <van-field readonly label-class="van-cell__title_gray" required v-model="formParams.phone" label="手机号" />
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.gridPersonTypeName"
            label="类别"
          />
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.birthday"
            label="出生日期"
          />
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.nationalityName"
            label="民族"
          />
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.politicName"
            label="政治面貌"
          />
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.edulevelName"
            label="学历"
          />
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.regionName"
            label="所属区域"
          />
          <van-field
            readonly
            label-class="van-cell__title_gray"
            required
            v-model="formParams.gridName"
            label="网格名称"
          />
          <div class="detail-btns">
            <div>
              <van-button block type="info" naive-type="submit">任务下发</van-button>
            </div>

            <div><van-button block type="info" @click.prevent="recordBtn">巡查记录</van-button></div>
          </div>
        </van-form>
      </van-sticky>
    </div>
  </div>
</template>

<script>
import Cockpit from '@/api/cockpit'
export default {
  data() {
    return {
      formParams: {}
    }
  },
  mounted() {
    this.getEmpDetail()
  },
  methods: {
    getEmpDetail() {
      Cockpit.GridMember.detail({
        gridPersonCode: this.$route.query.gridPersonCode
      }).then(res => {
        const { status, data } = res.data
        if (status === 0) {
          this.formParams = data
        }
      })
    },
    onSubmit() {
      this.$router.push({
        path: '/cockpit/gridMember/task',
        query: {
          gridPersonCode: this.$route.query.gridPersonCode
        }
      })
    },
    recordBtn() {
      this.$router.push({
        path: '/cockpit/gridMember/record',
        query: {
          gridCode: this.$route.query.gridPersonCode,
          appCode: this.$route.query.appCode
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.detail-btns {
  padding: 16px;
  display: flex;
  justify-content: space-around;
}
</style>
